<template>
	<div>
		<div class="mb-[10px] flex items-center gap-4">
			<cl-date-picker
				v-model="appointmentTime"
				type="daterange"
				valueFormat="YYYY-MM-DD"
				placeholder="请选择时间"
			></cl-date-picker>
			<cl-export-btn :columns="exportColumns" :data="tableData" :filename="exportFilename" />
		</div>
        <div class="table-container">
            <el-table :data="tableData" border style="width: 100%">
                <!-- <el-table-column prop="salesName" label="达人" width="300" align="center" /> -->
                <el-table-column prop="downSales" label="达人" width="150" align="center" />
                <el-table-column prop="upSales" label="上线" width="150" align="center" />
                <el-table-column prop="appoint" label="预约数" width="120" align="center" />
                <el-table-column prop="sign" label="到店" width="120" align="center" />
                <el-table-column prop="sign_rate" label="到店率" width="120" align="center" />
                <el-table-column prop="invite" label="海报打开数" width="120" align="center" />
                <el-table-column prop="invite_regist" label="海报注册数" width="120" align="center" />
                <el-table-column
                    prop="invite_regist_rate"
                    label="海报注册率"
                    width="120"
                    align="center"
                />
                <el-table-column prop="invite_source" label="转介绍数" width="120" align="center" />
                <el-table-column
                    prop="invite_source_rate"
                    label="转介绍率"
                    width="120"
                    align="center"
                />
                <el-table-column prop="convert" label="转化数" width="120" align="center" />
                <el-table-column prop="money" label="销售额" width="120" align="center" />
                <el-table-column prop="single_money" label="客单价" width="120" align="center" />
            </el-table>
        </div>
	</div>
</template>

<script lang="ts" setup>
defineOptions({
	name: 'appointment-board'
});

import { useCool } from '/@/cool';
import { onMounted, ref, watch, computed } from 'vue';
import dayjs from 'dayjs';

const { service } = useCool();
const tableData = ref([]);
const columns = ref([]);
const visitType = ref('');
const appointmentTime = ref([
	dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
	dayjs().format('YYYY-MM-DD')
]);

const exportColumns = computed(() => {
	return [
		{
			label: '达人',
			prop: 'downSales'
		},
		{
			label: '上线',
			prop: 'upSales'
		},
		{
			label: '预约数',
			prop: 'appoint'
		},
		{
			label: '到店',
			prop: 'sign'
		},
		{
			label: '到店率',
			prop: 'sign_rate'
		},
		{
			label: '海报打开数',
			prop: 'invite'
		},
		{
			label: '海报注册数',
			prop: 'invite_regist'
		},
		{
			label: '海报注册率',
			prop: 'invite_regist_rate'
		},
		{
			label: '转介绍数',
			prop: 'invite_source'
		},
		{
			label: '转介绍率',
			prop: 'invite_source_rate'
		},
		{
			label: '转化数',
			prop: 'convert'
		},
		{
			label: '销售额',
			prop: 'money'
		},
		{
			label: '客单价',
			prop: 'single_money'
		}
	];
});

const exportFilename = computed(() => {
	const startTime = dayjs(appointmentTime.value[0]).format('YYYYMMDD');
    const endTime = dayjs(appointmentTime.value[1]).format('YYYYMMDD');
    const now = dayjs().format('YYYYMMDD');
	return `达人预约数据看板_${startTime}_${endTime}_${now}`;
});

// 监听时间变化并查询
watch(appointmentTime, val => {
	if (val && val.length === 2) {
		getData();
	}
});

// 监听就诊类型变化
watch(visitType, () => {
	getData();
});

onMounted(async () => {
	getData();
});

// 获取数据
function getData() {
	const params = {
		startTime: appointmentTime.value[0],
		endTime: appointmentTime.value[1]
	};
	console.log(params);
	service.appointment.info.getSalesAppointConvertBoardForDaren(params).then(res => {
		tableData.value = res;
	});
}
</script>
<style scoped>
.table-container {
    height: 80vh;
    overflow: auto; /* 当内容超出容器高度时显示滚动条 */
}
</style>